<template>
    <div class="home">
        <!--头部搜索-->
        <van-nav-bar right-text="登录" right-arrow @click-left="onClickLeft" class="navbar" fixed>
            <template #left>
                <van-icon name="wap-nav" color="#fff"/>
            </template>
            <div slot="title">
                <van-search
                        v-model="value"
                        shape="round"
                        background="#C82519"
                        placeholder="请输入搜索关键词"
                        class="search"
                >
                    <span slot="left-icon"></span>
                </van-search>
            </div>
        </van-nav-bar>
        <!--轮播图-->
        <div>
            <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
                <van-swipe-item>1</van-swipe-item>
                <van-swipe-item>2</van-swipe-item>
                <van-swipe-item>3</van-swipe-item>
                <van-swipe-item>4</van-swipe-item>
            </van-swipe>
        </div>
        <!--分类-->
        <div>
            <van-grid :border="false" :column-num="5">
                <van-grid-item v-for="item in recommends">
                    <van-image :src="item.image"/>
                    <div class="text">{{item.title}}</div>
                </van-grid-item>
            </van-grid>
        </div>
        <!--秒杀-->
        <div class="seckill-container">
            <div>
                <div class="seckill"></div>
                <div class="more">更多秒杀 ></div>
            </div>
            <div class="seckill-goods-list">
                <ul class="seckill-goods">
                    <li v-for="item in recommends">
                        <van-image
                                cover
                                :src="item.image"
                                :class="{img:true}"
                        />
                        <span class="seckill-new-price">
                            <em>￥</em>
                            <span>100</span>
                        </span>
                        <span class="seckill-price">
                            <em>￥</em>
                            <span>1111</span>
                        </span>
                    </li>
                </ul>
            </div>
        </div>
        <!--东家小院-->
        <div>
            <img src="~assets/img/jd/xiaoyuan.png" alt="" class="xiaoyuan">
            <div class="xiaoyuan-container">
                <van-row class="xiaoyuan-list">
                    <van-col span="12" class="bd">
                        <p>宝宝最爱</p>
                        <p>宝宝最爱的潮流</p>
                        <img src="~assets/img/jd/sj.jpg" alt="">
                    </van-col>
                    <van-col span="12" class="bdb">
                        <p>尖货好礼</p>
                        <p>春节送礼必备</p>
                        <img src="~assets/img/jd/sj.jpg" alt="">
                    </van-col>
                </van-row>
                <van-row class="xiaoyuan-list">
                    <van-col span="6" class="bdr">
                        <p>尖货好礼</p>
                        <p>春节送礼必备</p>
                        <img src="~assets/img/jd/sj.jpg" alt="">
                    </van-col>
                    <van-col span="6" class="bdr">
                        <p>尖货好礼</p>
                        <p>春节送礼必备</p>
                        <img src="~assets/img/jd/sj.jpg" alt="">
                    </van-col>
                    <van-col span="6" class="bdr">
                        <p>尖货好礼</p>
                        <p>春节送礼必备</p>
                        <img src="~assets/img/jd/sj.jpg" alt="">
                    </van-col>
                    <van-col span="6">
                        <p>尖货好礼</p>
                        <p>春节送礼必备</p>
                        <img src="~assets/img/jd/sj.jpg" alt="">
                    </van-col>
                </van-row>
            </div>
        </div>
        <!--商品列表-->
        <div class="goods">
            <div class="recommend">
                <span><img src="~assets/img/jd/recommend.png" alt="" width="100%"></span>
            </div>
            <div id="list-content">
                <van-list
                        v-model="loading"
                        :finished="finished"
                        finished-text="没有更多了"
                        @load="onLoad"
                        error-text="加载失败"
                        offset=0
                >
                    <div class="goods_list">
                        <a v-for="item in goodsList" :href="'/goodsinfo/'+item.goods_id">
                            <img src="https://img13.360buyimg.com/mobilecms/s372x372_jfs/t1/63756/13/4838/85177/5d2ed069E511ed8de/794234f18de8bda8.jpg" alt="">
                            <p style="font-size: 12px;overflow: hidden">{{item.goods_sn}}</p>
                        </a>
                    </div>
                </van-list>
            </div>
        </div>
    </div>
</template>

<script>
  import Vue from 'vue'
  import {get,post} from "../network/request";
  import {NavBar,Icon,Search,Swipe,SwipeItem,Grid, GridItem,Image,Col, Row,List} from 'vant'
  Vue.use(NavBar).use(Icon).use(Search).use(Swipe).use(SwipeItem).use(Grid).use(GridItem).use(Image).use(Col).use(Row).use(List)
  export default {
    name: "Home",
    data(){
      return{
        value:'',
        recommends:[],
        goodsList:[],
        loading:false,
        finished:false,
        page:1,
        pageSize:10,
        total:0
      }
    },
    components:{
    },
    methods:{
      onClickLeft(){
        this.$router.push({path:'/category'})
      },
      getGoodsList(){
        let params = {
          page:this.page,
          pageSize: this.pageSize
        }
        post('/index/index/getGoods',params).then(res =>{
          this.goodsList.push(...res.data)
          this.total = res.total
          this.loading = false
          if (this.goodsList.length>=this.total){
            this.finished = true
          }
        })
      },
      onLoad(){
        this.page+=1
        this.getGoodsList()
      },
      getRecommends(){
        this.recommends = [
          {image:require("assets/img/jd/1.png"),title:"十点抢卷"},
          {image:require("assets/img/jd/2.png"),title:"内购福利"},
          {image:require("assets/img/jd/3.png"),title:"初秋上新"},
          {image:require("assets/img/jd/4.png"),title:"好物特卖"},
          {image:require("assets/img/jd/5.png"),title:"好物特卖"},
          {image:require("assets/img/jd/6.png"),title:"好物特卖"},
          {image:require("assets/img/jd/7.png"),title:"好物特卖"},
          {image:require("assets/img/jd/8.png"),title:"好物特卖"},
          {image:require("assets/img/jd/9.png"),title:"好物特卖"},
          {image:require("assets/img/jd/10.png"),title:"好物特卖"}
        ]
      }
    },
    created(){
      this.getRecommends()
      this.getGoodsList()
    }
  }
</script>

<style scoped>
    .home{
        clear: both;
        padding-top: 44px;
    }
    .navbar{
        background: #C82519;
    }
    .search{
        height: 1.22667rem;
        line-height: 1.22667rem;
    }
    .my-swipe .van-swipe-item {
        color: #fff;
        font-size: 20px;
        line-height: 200px;
        text-align: center;
        background-color: #39a9ed;
    }
    .text{
        text-align: center;
        font-size: 12px;
        padding-top: 10px;
    }
    .seckill{
        background: url("~@/assets/img/jd/miaosha.png");
        background-repeat: no-repeat;
        float: left;
        display: inline-block;
        width: 69px;
        height: 26px;
        margin-top: 8px;
        margin-right: 6px;
        margin-left: 9px;
        background-size: contain;
    }
    .seckill-container{
        margin: 10px;
        background-color: #fff;
        height: 165px;
        border-radius: 8px;
    }
    .more{
        display: inline-block;
        color: #f23030;
        float: right;
        text-align: right;
        font-size: 10px;
        position: relative;
        padding-right: 10px;
        margin-top: 8px;
    }
    .seckill-goods{
        margin-left: 9px;
        padding-top: 5px;
        overflow-x: scroll;
        width: 810.441px;
    }
    .seckill-goods-list{
        overflow-x: auto;
        overflow-y: hidden;
        clear: both;
    }
    .seckill-goods-list::-webkit-scrollbar {
        display: none;
    }
    .seckill-goods ul{
        list-style: none;
    }
    .seckill-goods li{
        width: 76px;
        float: left;
        overflow: hidden;
    }
    .seckill-new-price{
        width: 100%;
        color: #e93b3d;
        font-size: 16px;
        height: 16px;
        display: inline-block;
        line-height: 16px;
        text-align: center;
        margin-left: -12px;
    }
    .seckill-price{
        color: #999;
        font-size: 12px;
        line-height: 12px;
        text-align: center;
        display: inline-block;
        margin: 4px 0 11px;
        text-decoration: line-through;
        padding-left: 8px;
    }
    .xiaoyuan{
        width: 100%;
        margin: 0;
    }
    .xiaoyuan-container{
        margin: 0px 10px;
        background-color: #fff;
        height: 240px;
        border-radius: 8px;
    }
    .xiaoyuan-list{
        height: 120px;
        font-size: 12px;
    }
    .xiaoyuan-list p{
        margin: 0px;
        padding: 0px;
    }
    .xiaoyuan-list img{
        height: 80px;
    }
    .bdr{
        border-right: 2px solid #F6F6F6;
    }
    .bdb{
        border-bottom: 2px solid #F6F6F6;
    }
    .bd{
        border-right: 2px solid #F6F6F6;
        border-bottom: 2px solid #F6F6F6;
    }
    .goods{
        margin: 3px 10px;
    }
    .goods_list{
        display: inline-block;
    }
    .goods_list img{
        width: 175px;
    }
    .goods_list a{
        display: inline-block;
    }
    .goods_list a:nth-child(odd){
        margin-right: 5px;
    }
    .img{
        width: 66px;
        height: 66px;
    }
</style>
